<!--
 * @Author: byron
 * @Date: 2021-10-26 01:21:51
 * @LastEditTime: 2022-02-18 17:14:27
-->
<template>
    <a-table
        :pagination="false"
        :dataSource="permissionData"
        :columns="columns"
        bordered
    >
        <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'index'">
                {{ index + 1 }}
            </template>
            <template v-else-if="column.key === 'level'">
                <template v-if="record.level == 0"
                    ><a-tag color="pink">一级</a-tag></template
                >
                <template v-else-if="record.level == 1"
                    ><a-tag color="blue">二级</a-tag></template
                >
                <template v-else-if="record.level == 2"
                    ><a-tag color="green">三级</a-tag></template
                >
            </template>
        </template>
    </a-table>
</template>

<script>
import { getPermission } from '@/api/index.js'
import { ref } from 'vue'

const columns = [
    {
        title: '#',
        key: 'index',
    },
    {
        title: '权限名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '路径',
        dataIndex: 'con',
        key: 'con',
    },
    {
        title: '权限等级',
        dataIndex: 'level',
        key: 'level',
    },
]
export default {
    name: 'permission',
    setup() {
        const permissionData = ref([])
        const getData = async () => {
            const { data: res } = await getPermission({
                currentPage: 1,
                pageSize: 100,
            })
            console.log('@@@', res)
            permissionData.value = res.data.list
            console.log('@@@11', permissionData.value)
        }
        getData()
        return {
            columns,
            permissionData,
        }
    },
}
</script>

<style scoped lang="less"></style>
